<template>
	<view class="uni_box real_name">
		<u-navbar :is-back="false" title="">
			<view class="slot_content">
				<view class="nav_img" @click="backTo">
					<image src="@/static/17.svg"></image>
				</view>
				<view class="nav_title">实名认证</view>
			</view>
		</u-navbar>
		<view class="item">
			<view class="label">姓名</view>
			<view class="value">
				<input type="text" v-model="name" placeholder="请输入您的姓名">
				<image src="@/static/21.svg"></image>
			</view>
		</view>
		<view class="item">
			<view class="label">身份证</view>
			<view class="value">
				<input type="text" v-model="id_card" placeholder="请输入您的身份证号码">
				<image src="@/static/21.svg"></image>
			</view>
		</view>
		<view class="item">
			<view class="label">手机号码</view>
			<view class="value">
				<input type="text" v-model="$store.state.info.show_phone" disabled placeholder="请输入您的手机号码">
				<image src="@/static/21.svg"></image>
			</view>
		</view>
		<view class="desc">
			购买前请完成实名认证,实名认证完成后,您的提现账户将与此实名信息进行绑定,请知晓!
		</view>

		<view class="footer">
			<view class="footer_already" v-if="$store.state.info.is_realname">已认证</view>
			<view class="footer_btn" v-else @click="realnamePost">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				id_card: ""
			}
		},
		async onLoad() {
			if (this.$store.state.info.is_realname) {
				let {
					realname
				} = await this.$u.api.realname();
				this.name = realname.name;
				this.id_card = realname.id_card;
			}
		},
		methods: {
			async realnamePost() {
				await this.$u.api.realnamePost({
					name: this.name,
					id_card: this.id_card
				});
				this.$u.toast("实名认证成功");
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/tabbar/my'
					})
				}, 1000);
			},
			backTo() {
				uni.navigateBack()
			},
			router(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	$footerHeight:210rpx;

	.footer {
		width: 100%;
		height: $footerHeight;
		padding: 20rpx 60rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;

		view {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 20rpx;
		}

		.footer_btn {
			color: #FFFFFF;
			background: #6BD288;
		}

		.footer_already {
			color: #F0FBF3;
			background: #D1F1DA;
		}
	}

	.real_name {
		padding: 30rpx 30rpx $footerHeight;
		box-sizing: border-box;

		.item {
			margin-bottom: 44rpx;

			.label {
				color: #2A2A2A;
				font-size: 28rpx;
				margin-bottom: 44rpx;
			}

			.value {
				height: 100rpx;
				background: #F0FBF3;
				border-radius: 20rpx;
				border: 1px solid #6BD288;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				input {
					flex: 1;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.desc {
			color: #C2C2C2;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 44px;
		}
	}
</style>
